<!-- 头部导航 -->
<header class="bg-white border-b border-gray-100 top-0 z-50 safe-area-top ">
    <!-- 主导航栏 -->
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex items-center justify-between header-nav h-16 md:h-16">
            <!-- 左侧区域：Logo + 导航 -->
            <div class="flex items-center">
                <!-- Logo区域 -->
                <div class="flex header-logo items-center">
                    <a href="/" class="flex items-center">
                        <img src="{:conf('site_logo')}" alt="{:conf('site_name')}" class="h-8 w-auto">
                    </a>
                </div>

                <!-- 桌面端导航菜单 -->
                <nav class="hidden lg:flex items-center space-x-6 ml-6">
                    <a href="/" class="text-gray-800 hover:text-blue-500 transition-colors font-medium">首页</a>

                    <!-- 栏目下拉菜单 -->
                    <div class="relative group">
                        <button
                            class="flex items-center text-gray-800 hover:text-blue-500 transition-colors font-medium">
                            全部分类
                            <i class="fas fa-chevron-down ml-1 text-xs group-hover:rotate-180 transition-transform"></i>
                        </button>
                        <!-- 下拉菜单 -->
                        <div
                            class="absolute top-full left-0 mt-1 w-96 bg-white rounded-sm shadow-xl border border-gray-200 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50">
                            <div class="p-4">
                                <div class="grid grid-cols-2 gap-2" id="categories-dropdown">
                                    <!-- 动态加载分类 -->
                                </div>
                            </div>
                        </div>
                    </div>

                    <a href="{:_url_('goods.tag')}"
                        class="text-gray-800 hover:text-blue-500 transition-colors font-medium">标签</a>
                    {cms:hooks name="header_nav" /}
                </nav>
            </div>

            <!-- 右侧区域：搜索框 + 用户菜单 -->
            <div class="flex items-center">
                <!-- 搜索框 - 桌面端 -->
                <div class="hidden md:block mr-4">
                    <div class="relative">
                        <input type="text" id="search-input" placeholder="搜索商品..."
                            class="w-64 px-4 py-2 border border-gray-300 rounded-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors">
                        <button onclick="doSearch()"
                            class="absolute right-2 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-blue-500 transition-colors">
                            <i class="fas fa-search"></i>
                        </button>
                    </div>
                </div>

                <!-- 搜索按钮 - 移动端 -->
                <button class="md:hidden text-gray-800 hover:text-blue-500 mr-3 p-2 rounded-sm touchable"
                    onclick="toggleMobileSearch()">
                    <i class="fas fa-search text-lg"></i>
                </button>

                <div class="header-user w-30">
                    <!-- 已登录状态 -->
                    {if $is_login}
                    <div id="user-data" class="hidden" data-user-id="{$user.id}" data-username="{$user.username}"
                        data-nickname="{$user.nickname|default=''}" data-avatar="{$user.avatar|default=''}"></div>

                    <div class="login-required" id="user-menu">
                        <button onclick="toggleUserMenu()"
                            class="flex items-center space-x-2 text-gray-800 hover:text-blue-500">
                            <img id="header-avatar" src="{$user.avatar}" alt="用户头像"
                                class="w-8 h-8 rounded-full object-cover border border-gray-200">
                            <span id="header-username" class="hidden sm:block font-medium">{$user.nickname}</span>
                        </button>
                        <!-- 下拉菜单 -->
                        <div id="user-dropdown"
                            class="absolute right-0 mt-2 w-48 bg-white rounded-sm shadow-md border border-gray-200 opacity-0 invisible transition-all duration-200 z-50">
                            <div class="py-2">
                                <a href="{:_url_('user.index')}"
                                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-blue-600 transition-colors">
                                    <i class="fas fa-user mr-2"></i>用户中心
                                </a>
                                <a href="{:_url_('user.order')}"
                                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-blue-600 transition-colors">
                                    <i class="fas fa-shopping-bag mr-2"></i>我的订单
                                </a>
                                <a href="{:_url_('user.favorite')}"
                                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-blue-600 transition-colors">
                                    <i class="fas fa-heart mr-2"></i>我的收藏
                                </a>
                                <a href="{:_url_('user.vip')}"
                                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-blue-600 transition-colors">
                                    <i class="fas fa-crown mr-2"></i>VIP会员
                                </a>
                                <a href="{:_url_('user.sign')}"
                                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-blue-600 transition-colors">
                                    <i class="fas fa-calendar-check mr-2"></i>每日签到
                                </a>
                                <div class="border-t border-gray-200 my-1"></div>
                                <button onclick="logout()"
                                    class="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-red-50 hover:text-red-600 transition-colors">
                                    <i class="fas fa-sign-out-alt mr-2"></i>退出登录
                                </button>
                            </div>
                        </div>
                    </div>
                    {else}
                    <!-- 未登录状态 -->
                    <div class="logout-required flex items-center justify-end gap-2 w-full">
                        <a href="{:_url_('user.login')}" class="text-blue-500 hover:text-gray-800 text-sm font-medium"
                            target="_blank">登录</a>
                        <a href="{:_url_('user.register')}"
                            class="text-blue-500 hover:text-gray-800 text-sm font-medium" target="_blank">注册</a>
                    </div>
                    {/if}
                </div>
                <!-- <style>
                    .lang-active{font-weight:bold;color:#007bff;}
                    .lang-btn{margin:0 4px;padding:4px 8px;border:1px solid #ccc;border-radius:4px;text-decoration:none;}
                    .lang-btn:hover{background:#f5f5f5;}
                    </style>
                <?php
                $current = session('lang', 'zh_CN');
                foreach(['zh_CN'=>'中文','en'=>'English'] as $code=>$name){
                    $active = $code===$current ? 'lang-active' : '';
                    echo '<a class="lang-btn '.$active.'" href="/api/index/setLang?lang='.$code.'">'.$name.'</a>';
                }
                ?> -->

                <!-- 移动端菜单按钮 -->
                <button class="lg:hidden text-gray-800 hover:text-blue-500 ml-2 p-2 rounded-sm touchable"
                    onclick="toggleMobileMenu()">
                    <i class="fas fa-bars text-lg" id="mobile-menu-icon"></i>
                </button>
            </div>
        </div>

        <!-- 移动端搜索框 -->
        <div id="mobile-search" class="hidden md:hidden border-t border-gray-200 p-4 bg-gray-50">
            <div class="relative">
                <input type="text" id="mobile-search-input" placeholder="搜索商品..."
                    class="w-full px-4 py-3 pr-12 border border-gray-300 rounded-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white text-base">
                <button onclick="doMobileSearch()"
                    class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-blue-500 p-1 rounded-sm touchable">
                    <i class="fas fa-search text-lg"></i>
                </button>
            </div>
            <button onclick="toggleMobileSearch()"
                class="mt-3 w-full py-2 text-sm text-gray-600 hover:text-gray-800 touchable">
                取消搜索
            </button>
        </div>

        <!-- 移动端导航菜单 -->
        <div id="mobile-menu" class="hidden lg:hidden border-t border-gray-200 bg-white">
            <div class="py-4 space-y-2">
                <a href="/" class="block px-4 py-2 text-gray-800 hover:text-blue-500 hover:bg-gray-50">首页</a>
                <div class="px-4">
                    <button onclick="toggleMobileCategories()"
                        class="flex items-center justify-between w-full py-2 text-gray-800 hover:text-blue-500">
                        <span>全部栏目</span>
                        <i class="fas fa-chevron-down text-xs" id="mobile-categories-arrow"></i>
                    </button>
                    <div id="mobile-categories" class="hidden pl-4 py-2 space-y-1">
                        <!-- 动态加载分类 -->
                    </div>
                </div>
                <a href="/tag" class="block px-4 py-2 text-gray-800 hover:text-blue-500 hover:bg-gray-50">商品标签</a>
                <a href="{:_url_('user.index')}"
                    class="block px-4 py-2 text-gray-800 hover:text-blue-500 hover:bg-gray-50">用户中心</a>
            </div>
        </div>
    </div>
</header>